<template>
  <div class=''>
    <h1>测试轮播图</h1>
    <!-- 2s自动播放下一张，左右按钮切换，list是图片列表 -->
    <my-slider
    style="width:900px;height:500px;"
    :auto="2000"
    :curIdx="curIdx"
    :list="list"
    @click="hClick"
    @change="hChange"
    ></my-slider>
  </div>
</template>

<script>
export default {
  name: 'SliderTest',
  props: { },
  data () {
    return {
      curIdx: 1, // 默认显示第二张图
      list: [
        {
          url: 'http://contentcms-bj.cdn.bcebos.com/cmspic/870d7d4f1549ffccb64a420acb848063.jpeg?x-bce-process=image/crop,x_0,y_0,w_899,h_490',
          alt: '离太阳最近的地方的一场春耕'
        },
        {
          url: 'http://contentcms-bj.cdn.bcebos.com/cmspic/011a0b86e8c9cc6588a1a7bf209f3a62.jpeg?x-bce-process=image/crop,x_0,y_0,w_1000,h_544',
          alt: '长江三峡水库'
        },
        {
          url: 'http://contentcms-bj.cdn.bcebos.com/cmspic/bed3d19847910372f8cd3dadb1bf3ab3.jpeg?x-bce-process=image/crop,x_0,y_0,w_785,h_428',
          alt: '月球方舟在格陵兰岛测试'
        },
        {
          url: 'http://contentcms-bj.cdn.bcebos.com/cmspic/5f906be951c371c500d89be50d48025d.jpeg?x-bce-process=image/crop,x_0,y_0,w_1000,h_544',
          alt: '虎门大桥水域恢复通航'
        },
        {
          url: 'https://m1-1253159997.image.myqcloud.com/imageDir/4d1c912baeb29e459cb8bc96a27c8c82.JPG',
          alt: '九寨沟熊猫园里的大熊猫憨态可掬'
        }
      ]
    };
  },
  computed: { },
  created () { },
  mounted () { },
  methods: {
    hClick (curIdx) {
      console.log('点击的下标', curIdx);
    },
    hChange (curIdx) {
      console.log('下标改变了', curIdx);
    }
  }
};
</script>

<style scoped lang='less'></style>
